import { DefaultFooter, getMenuData, getPageTitle } from '@ant-design/pro-layout';
import { Helmet, HelmetProvider } from 'react-helmet-async';
import { Link, useIntl, connect } from 'umi';
import React from 'react';
import SelectLang from '@/components/SelectLang';
import logo from '../assets/logo.svg';
import styles from './UserLayout.less';
import FixBig from "@/components/FixBg"
import QueueAnim from 'rc-queue-anim';
import { TITLE, SUBTITLE } from "@/utils/config";

const UserLayout = (props) => {
  const {
    route = {
      routes: [],
    },
  } = props;
  const { routes = [] } = route;
  const {
    children,
    location = {
      pathname: '',
    },
  } = props;
  // const {} = useIntl();
  const { breadcrumb } = getMenuData(routes);
  const title = getPageTitle({
    pathname: location.pathname,
    breadcrumb,
    ...props,
  });
  return (
    <HelmetProvider>
      <Helmet>
        <title>{title}</title>
        <meta name="description" content={title} />
      </Helmet>
      {/* 添加背景图片 */}
      {/* <FixBig src={"/bg.mp4"} /> */}
      {/* <FixBig src={require("@/assets/loginbg.jpg")} /> */}
      <div className={styles.container}>
        {/* <div className={styles.lang}>
          <SelectLang />
        </div> */}
        <QueueAnim type="scaleX" delay={300}>
          <div key="loginBox" className={styles.content}>
            <div className={styles.top}>
              <div className={styles.header}>
                <div>
                  <img alt="logo" className={styles.logo} src={logo} />
                  <span className={styles.title}>{TITLE}</span>
                </div>
              </div>
              <div className={styles.desc}>{SUBTITLE}</div>
            </div>
            {children}
          </div>
        </QueueAnim>
        {/* <DefaultFooter
          copyright={`2020 ${TITLE}`}
          links={[
            {
              key: 'jxzc',
              title: '技术支持 by：iver',
              blankTarget: true,
            },
          ]}
        /> */}
      </div>
    </HelmetProvider>
  );
};

export default connect(({ settings }) => ({ ...settings }))(UserLayout);
